<template>
  <div :id="getPlayerId" />
</template>

<script>
import { ref, computed, watch, onMounted, nextTick } from 'vue'
let percent = 0
export default {
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          source: ''
        }
      }
    }
  },
  emits: ['timeUpdate', 'video-status'],
  setup(props, { emit }) {
    const videoPlayer = ref()
    const hasInit = ref(false)
    const isSeek = ref(false)

    const toolComponent = Aliplayer.Component({
      timeupdate(player, e) {
        const currentTime = player.getCurrentTime()
        const duration = player.getDuration()
        emit('timeUpdate', {
          status: isSeek.value || Number.isInteger(currentTime) ? 'skip' : 'palying',
          percent: percent,
          currentTime,
          duration
        })
      },
      ready(player, e) {
        const currentTime = player.getCurrentTime()
        const duration = player.getDuration()
        emit('video-status', {
          status: 'ready',
          currentTime,
          duration
        })
      }
    })
    const getPlayerId = computed(() => {
      return props.options?.id || 'player'
    })
    // 获取当前视频播放的百分比
    function getPercent() {
      return percent
    }
    function init() {
      const player = new Aliplayer({
        id: 'player',
        width: '500px',
        height: '500px',
        autoplay: true,
        ...props.options,
        components: [
          toolComponent
        ]
      }, function(player) {
        if (player.getOptions().autoplay) {
          player.mute()
        }
      })
      videoPlayer.value = player
      player.on('startSeek', () => {
        isSeek.value = true
      })
      player.on('completeSeek', () => {
        percent = videoPlayer.value.getCurrentTime() / videoPlayer.value.getDuration()

        isSeek.value = false
      })
      hasInit.value = true
    }
    function getTime() {
      return videoPlayer.value.getCurrentTime()
    }
    function seekTime(time) {
      videoPlayer.value.seek(time)
    }
    function playVideo() {
      videoPlayer.value.play()
    }
    function pauseVideo() {
      videoPlayer.value.pause()
    }
    function disposeVideo() {
      hasInit.value = false
      videoPlayer.value?.dispose()
    }
    watch(
      () => props.options,
      (val) => {
        if (props.options.id && props.options.source) {
          if (!hasInit.value) {
            init()
          } else {
            disposeVideo()
            nextTick(() => {
              init()
            })
          }
        }
      }
    )
    onMounted(() => {
      if (props.options.id && props.options.source && !hasInit.value) {
        init()
      }
    })
    return {
      getPlayerId,
      getPercent,
      getTime,
      seekTime,
      playVideo,
      pauseVideo,
      disposeVideo

    }
  }
}
</script>
<style>
.prism-player .prism-ErrorMessage .prism-error-operation{
  border-bottom: none;
}
.prism-player .prism-ErrorMessage .prism-error-operation a.prism-button.prism-button-refresh{
  display: none;
}
.prism-player .prism-ErrorMessage .prism-detect-info.prism-center{
  display: none;
}
</style>
